﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Products</title>
    <link href="../Content/CommonStyle.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-1.9.0.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.tmpl.js" type="text/javascript"></script>
    <script src="../Scripts/ViewsJS/Products.js" type="text/javascript"></script>
    <script id="categoryTemplate" type="text/html">
            <li class="ui-widget-content ui-corner-all">
                <h1 onclick="GetProducts(${ ProductCategoryID });" id="mnu${ ProductCategoryID }" class="ui-widget-header"> ${ ParentCategory } </h1>
                <p class="subMenu" id="${ ParentCategory }"></p>
            </li>
    </script>
    <script id="productTemplate" type="text/x-jquery-tmpl"> 
        <tr>
            <td>${ Name }</td>
            <td>${ ProductNumber }</td>
            <td>${ ListPrice }</td>
            <td>${ Color }</td>
            <td>${ Size }</td>
            <td>${ Weight }</td>
            <td><input class="quantityText" type="text" id="txt${ ProductID }" /></td>
            <td><a <a href="#" class="AddToCart"><img alt='Add to Cart' title='Add to Cart' src="../Images/addCart.gif" /></a></td>
        </tr>
    </script>
    <script id="CartProductTemplate" type="text/x-jquery-tmpl"> 
        <tr>
            <td style="display:none;">${ ProductID }</td>
            <td>${ ProductCode }</td>
            <td>${ Quantity }</td>
            <td>${ Price }</td>
            <td><a href="#" class="removeFromCart"><img alt='Remove' title='Remove' src="../Images/delete.gif" /></a></td>
        </tr>
    </script>

</head>
<body>
    <div id="divMain">
        <div id="divCategory">
            <ul id="categories">
            </ul>
        </div>
        <img id="loader" src="../Images/ajax-loader.gif" style="" />
        <div id="divProduct">
            <table id="tblLeft">
                <tbody>
                    <tr>
                        <th>
                            Name
                        </th>
                        <th>
                            Product Code
                        </th>
                        <th>
                            Price
                        </th>
                        <th style="width: 70px;">
                            Color
                        </th>
                        <th style="width: 50px;">
                            Size
                        </th>
                        <th style="width: 50px;">
                            Width
                        </th>
                        <th style="width: 30px;">
                            Quantity
                        </th>
                        <th style="width: 20px;">
                        </th>
                    </tr>
                </tbody>
                <tbody id="productData">
                </tbody>
            </table>
            <table id="tblRight">
                <tbody>
                    <tr>
                        <th>
                            Product Code
                        </th>
                        <th>
                            Qty.
                        </th>
                        <th>
                            Price
                        </th>
                        <th>
                            
                        </th>
                    </tr>
                </tbody>
                <tbody id="cartData">
                </tbody>
                 <tbody id="totalCartPrice">
                    <tr>
                        <th colspan="2">Total cart Price</th>
                        <th id="lblCartTotal" style="text-align:left;">0.00</th>
                        <th><a href="#" onclick="ChecOutItem();" class="checkOutCart"><img alt='Check Out' title='Check Out' src="../Images/cart.gif" /></a></th>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
